<template>
    <div class="section-header text-center">
        <div class="subtitle subtitle--style3 justify-content-center">
            <img src="/images/icon/home3/2.png" alt="roket icon">
            <p class="mb-0">Course</p>
        </div>
        <h2>Display the special course we provide.</h2>
    </div>
    <div class="course__wrapper">
        <ul class="nav nav-pills" id="pills-tab" role="tablist">
            <li v-for="(item, idx) in categoryList" :key="idx" class="nav-item">
                <button class="tab-btn" :class="{ 'active': selectedCategory === item.categoryID }" id="pills-web-tab"
                    @click="selectedCategory = item.categoryID">{{
                        item.category }}</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" tabindex="0">
                <div class="row g-4">
                    <div v-for="(item, index) in filteredCourses.slice(0, 8)" :key="index" class="col-xxl-3 col-lg-4 col-md-6">
                        <CourseCardThree :courseDetails="item" />
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center">
            <nuxt-link to="/courses" class="trk-btn  trk-btn--secondary3 mt-5"> All Courses
                <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
        </div>

    </div>
</template>

<script>
import CourseCardThree from '@/components/partials/CourseCardThree.vue'
export default {
    components: { CourseCardThree },
    props: {
        courses: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            categoryList: [],
            selectedCategory: '',
            filteredCourses: []
        }
    },
    watch: {
        selectedCategory(value) {
            this.filteredCourses = this.courses.filter(course => course.categoryID === value);
        }
    },

    created() {
        this.categoryList = [...new Set(this.courses.map(item => item.categoryID))].map(categoryID => {
            return {
                categoryID: categoryID,
                category: this.courses.find(item => item.categoryID === categoryID).category
            };
        });
    },

    mounted() {
        if (this.categoryList && this.categoryList.length) {
            this.selectedCategory = this.categoryList[0].categoryID
        }
    },
}
</script>